<%@page import="com.context.AppContext"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ut" uri="/WEB-INF/tlds/util" %>
<!DOCTYPE html>
<html lang="es">
  <head>    
    <title>Programaci&oacute;n de Conglomerados</title> 
    
    <%@include file="includes.jsp" %>     
    <script src="js/util/Util.js?v=<%=AppContext.getVersion() %>" language="javascript"></script>
    <link href="js/calendar/CalendarControl.css?v=<%=AppContext.getVersion() %>" rel="stylesheet"/>    
    <script src="js/calendar/CalendarControl.js?v=<%=AppContext.getVersion() %>" language="javascript"></script>    
   
  </head>
  
  <body>      
      
      <div class="container">   
    
        <form id="form1" class="form-horizontal" role="form" method="post" action="">  
        <fieldset>
        <legend>Programaci&oacute;n de Periodos</legend>
        
        <div class="form-group row">                
            <div class="col-md-1">
                <label for="anho" class="control-label">A&ntilde;o</label>
            </div>
            
            <div class="col-md-2">
                <select class="form-control" id="anho" name="anho">
                    <option value=""></option>
                    <c:forEach items="${anhos}" var="e">
                        <option value="${e}" 
                                <c:if test="${comando.anho==e}"> 
                                selected="selected"
                                </c:if>
                            > ${e} </option>
                    </c:forEach>
                </select>
            </div>
            
            <button class="btn btn-primary" onclick="guardar()">Guardar</button>
        </div>
        
        <p>
            Para cada mes establezca la fecha de inicio del primer periodo
        </p>   
        
        <div class="form-group row">
            <div class="col-md-1">
                <label class="control-label">Mes</label> 
            </div>
            <div class="col-md-2">
                <label class="control-label">Periodo 1</label> 
            </div>
            <div class="col-md-1">
                <label class="control-label">Periodo 2</label> 
            </div>
            <div class="col-md-1">
                <label class="control-label">Periodo 3</label> 
            </div>
            <div class="col-md-1">
                <label class="control-label">Periodo 4</label> 
            </div>
            <div class="col-md-1">
                <label class="control-label">Periodo 5</label> 
            </div>
        </div>
        
        <script type="text/javascript">
            var f = new Formulario();           
        </script>
                        
        <c:forEach items="${meses}" var="e">
            <script type="text/javascript">
                f.input("${e}","").esFecha();
            </script>
            <div class="form-group row">
                <div class="col-md-1">
                    <label class="control-label">${e.nombre}</label> 
                </div>
                <div class="col-md-2">
                    <input id="${e}1" name="${e}" type="text" class="form-control" onFocus="showCalendarControl(this);" />
                </div>
                <div class="col-md-1">
                    <label id="${e}2" class="control-label">##/##/####</label> 
                </div>
                <div class="col-md-1">
                    <label id="${e}3" class="control-label">##/##/####</label> 
                </div>
                <div class="col-md-1">
                    <label id="${e}4" class="control-label">##/##/####</label> 
                </div>
                <div class="col-md-1">
                    <label id="${e}5" class="control-label">##/##/####</label> 
                </div>
            </div>  
            
        </c:forEach>
        
        
            
        </fieldset>
        </form>   
      
          </br>
          </br>
          </br>
          </br>
          </br>
          </br>
          </br>
          </br>
          </br>
          </br>
                     
   </div>      
      
      
      <script type="text/javascript">
            function guardar() {
                if(!f.esValido()) {
                    return ;
                }         
                var form = document.getElementById("form1");
                form.action = "dispatcher?controller=programacion_periodo&action=guardar";
                form.submit();
            }
            
            function setearMeses() {
                <c:forEach items="${meses}" var="e">
                    document.getElementById("${e}1").value = "";
                </c:forEach>
                
                if(document.getElementById("anho").value=="")
                    return ;
                
                var url = "dispatcher?controller=programacion_periodo&action=json&"+$('#form1').serialize();            
                $.getJSON(url,function(result){
                    var periodos;
                    <c:forEach items="${meses}" var="e">
                        periodos = result["${e.codigoString}"];
                        document.getElementById("${e}1").value = periodos["1"];
                        document.getElementById("${e}2").innerHTML = periodos["2"];
                        document.getElementById("${e}3").innerHTML = periodos["3"];
                        document.getElementById("${e}4").innerHTML = periodos["4"];
                        document.getElementById("${e}5").innerHTML = periodos["5"];
                    </c:forEach>
                });
            }
            
            setearMeses();            
            $("#anho").on("change", function() {
                setearMeses();
            });
        </script>
        
  </body>
</html>